@import "variables";

service-card-list{
  .seed-default-graph{
    padding-top: pxTorem(100) !important;
  }
  .list-head{
    width: 100%;
    height: pxTorem(308);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: pxTorem(40) pxTorem(15);
    .go-back{
      transform:rotate(180deg);
      -ms-transform:rotate(180deg); 	/* IE 9 */
      -moz-transform:rotate(180deg); 	/* Firefox */
      -webkit-transform:rotate(180deg); /* Safari 和 Chrome */
      -o-transform:rotate(180deg); 	/* Opera */
      width: pxTorem(20);
      height: pxTorem(44);
      float: left;
    }
    .go-explain{
      float: right;
      width: pxTorem(44);
      height: pxTorem(44);
      border:1px solid #FFFFFF;
      border-radius: 50%;
      line-height: pxTorem(44);
      text-align: center;
      color:#FFFFFF;
    }
  }
  .card-list{
    .card-header{
      border-left: pxTorem(6) solid color($h5,c1);
      margin:pxTorem(30) 0;
      padding-left: pxTorem(20);
      font-size: standard($f, f3);
      color: color($h5, c2);
      font-weight: bold;
    }
    .list-content {
      padding:pxTorem(10) pxTorem(24);
      div.list-item{
        margin: pxTorem(40) 0;
        border-radius: pxTorem(20);
        position: relative;
        overflow: hidden;
        z-index: 1;
        height: pxTorem(300);
        .img-box{
          width: 100%;
          height: 100%;
        }
        .bg-opacity{
          width: 100%;
          height: pxTorem(150);
          position: absolute;
          left: 0;
          bottom: 0;
          background-image: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,0.6));
          z-index: 0;
        }
        .status{
          display: block;
          width: pxTorem(141);
          height: pxTorem(141);
          color: color($h5,c10);
          position: absolute;
          top:pxTorem(-70);
          right: pxTorem(-70);
          text-align: center;
          padding-top: pxTorem(105);
          transform:rotate(45deg);
        }
        .add-time{
          position: absolute;
          right: pxTorem(20);
          bottom: pxTorem(20);
          color:color($h5,c10);
          z-index: 2;
        }
        .word{
           position: absolute;
           left: pxTorem(20);
           bottom: pxTorem(20);
           width: 70%;
          color:color($h5,c10);
          z-index: 2;
          p{
            font-size: standard($f,f1);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
          span{
            margin-top:pxTorem(20);
            display: block;
          }
         }
        .no-use{
          background: color($h5,c11);
        }
        .can-use{
          background: color($h5,c1);
        }
        .cannot-use{
          background: color($h5,c6);
        }
      }
    }
  }
}
